<template>
  <div
    :style="bgImage(showImage, { width: size, height: size }, false)"
    class="com-global-image-up-base w-flex-center w-image-fill w-pointer"
    @click.self="imageShow">
    <icon-refresh
      v-if="showImage"
      @click="imgSelClick"
      class="refresh-icon"/>
    <add-image-icon
      v-else
      style="padding: 10%"
      @click="imgSelClick"
      width="100%"
      height="100%"
      fill="#ddd"/>
    <edit-icon
      v-if="input"
      @click.stop="editBtnClick"
      class="edit-icon"/>
    <input
      ref="INPUT_FILE"
      class="w-input-hid"
      type="file"
      @click.stop
      accept="image/*"
      @change="fileChange">
    <w-image-show
      ref="IMAGE_SHOW"/>
  </div>
</template>

<script>
  import { LocalImage, ExistFile } from 'yb-tool'
  import WImageShow from '../viewer'
  import AddImageIcon from '@/icons/add-image.svg'
  import IconRefresh from '@/icons/refresh.svg'
  import EditIcon from '@/icons/edit.svg'

  /**
   * 图片上传组件
   */
  export default {
    name: 'ComGlobalImageUp',
    inject: ['bgImage'],
    components: {
      WImageShow,
      AddImageIcon,
      IconRefresh,
      EditIcon
    },
    props: {
      /**
       * 图片的地址
       */
      souceUrl: {
        type: String,
        default: null
      },
      /**
       * 试图大小
       */
      size: {
        type: String,
        default: '200px'
      },
      /**
       * 是否允许输入
       */
      input: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        /**
         * 选择的图片/输入的图片路径
         */
        selImage: null,
        /**
         * 文件事件对象
         */
        fileEvent: null
      }
    },
    computed: {

      /**
       * 需要显示的图片地址
       */
      showImage() {
        return this.selImage || this.souceUrl
      }
    },
    methods: {
      /**
       * 图片显示
       */
      imageShow() {
        this.$refs['IMAGE_SHOW'].show ([this.showImage])
      },
      /**
       * 图片选址点击
       */
      imgSelClick() {
        this.$refs['INPUT_FILE'].dispatchEvent(new MouseEvent('click'))
      },
      /**
       * 编辑按钮点击
       */
      editBtnClick() {
        this.$w_popview.prompt('请输入要上传的图片地址', '', (str) => {
          return str ? null : '请输入链接地址'
        }).w_then((url) => {
          this.selImage = url
          this.fileEvent = null
          this.$refs['INPUT_FILE'].value = null
        })
      },
      /**
       * 文件改变的时候调用
       * @param e 事件
       */
      fileChange(e) {
        if (ExistFile (e)) {
          // 预览图片
          LocalImage (e).then ((data) => {
            this.selImage = data
            this.fileEvent = e
          }).catch (() => {
            this.$w_popview.msgError ('预览图片出错')
          })
        }
      },
      /**
       * 上传图片
       * @returns {*}
       */
      getImage() {
        return new Promise((resolve, reject) => {
          if (this.fileEvent) {
            resolve({
              type: 'SEL_FILE',
              event: this.fileEvent,
              img: this.selImage
            })
          } else if (this.selImage){
            resolve({
              type: 'INPUT_URL',
              url: this.selImage
            })
          } else if (this.souceUrl){
            resolve({
              type: 'SOUCE_URL',
              url: this.souceUrl
            })
          } else {
            reject ({
              code: 'imageUpErr',
              msg: '请选择图片'
            })
          }
        })
      },
      /**
       * 清除选中的图片
       */
      clear() {
        this.fileEvent = null
        this.selImage = null
      }
    }
  }
</script>

<style lang="scss" scoped>
  .com-global-image-up-base {
    border: 1px dashed #ddd;
    border-radius: 6px;
    overflow: hidden;
    position: relative;

    .edit-icon, .refresh-icon {
      position: absolute;
      top: 0;
      padding: 5px;
      background-color: rgba(3,3,3,.5);
      width: 34px;
      height: 34px;
      fill: #fff;
    }

    .edit-icon {
      left: 0;
    }

    .refresh-icon {
      right: 0;
    }
  }
</style>

